<template>
  <div class="tab-cont tab-cont-order">
    <div class="title lg:!px-0">
      <div class="row flexbox flex-align-center flex-justify-between">
        <h1 class="name capitalize">{{ $t('userPanel.order') }}</h1>
        <div class="search-comp">
          <LazySearch :placeholder="$t('formPlaceholder.order')" @searchDone="submitSearch" @searchClear="searchClear" />
        </div>
      </div>
    </div>
    <div class="filter lg:!px-0 flexbox flex-align-center flex-justify-between">
      <div class="tabs flexbox flex-align-center">
        <div :class="['tab capitalize', orderTabId == '' ? 'active' : '']" @click="orderTabChange('')">
          {{ $t('filter.all') }}
        </div>
        <div :class="['tab capitalize', orderTabId == 1 ? 'active' : '']" @click="orderTabChange(1)">
          {{ $t('filter.pending') }}
        </div>
        <div :class="['tab capitalize', orderTabId == 4 ? 'active' : '']" @click="orderTabChange(4)">
          {{ $t('filter.completed') }}
        </div>
        <!-- <div :class="['tab',orderTabId==9? 'active':'']" @click="orderTabChange(9)">{{$t('filter.afterSales')}}</div> -->
      </div>
      <div class="search-comp">
        <LazySearch :placeholder="$t('formPlaceholder.order')" @searchDone="submitSearch" />
      </div>
    </div>
    <InfiniteScroll :loading="loading" :no-more="noMore" NoDataType="order" @load-more="loadMoreData" v-model="orderList"> </InfiniteScroll>
    <div class="list">
      <div class="item" v-for="item in orderList" :key="item.id">
        <div class="info flexbox flex-align-center flex-justify-between">
          <NuxtLink class="flexbox flex-align-center" :to="goOrderPay(item)">
            <span class="date capitalize">{{ item.create_time_text }}</span>
            <div class="no flex gap-1 items-center">
              <span> {{ $t('formItem.payNo') }}</span>
              <span>:</span>
              <span>
                {{ item.order_no }}
              </span>
            </div>
          </NuxtLink>
          <div class="flexbox flex-align-center">
            <span :class="['price', item.order_status == 6 ? 'overtime' : '']">{{ item.currency_symbol }}{{ item.payable_price_text }}</span>
            <NuxtLink :to="goOrderPay(item)">
              <el-button class="btn pay-btn" v-if="item.order_status == 0">{{ $t('formBtn.continuePayment') }}</el-button>
            </NuxtLink>
            <el-button class="btn" v-if="item.order_status == 6" @click="deleteOrder(item)">{{ $t('formBtn.delete') }}</el-button>
          </div>
        </div>
        <!-- v-if="item.order_goods" -->
        <div class="base flexbox flex-align-center flex-justify-between" v-for="item1 in item.order_goods" :key="item1.order_no">
          <div class="goods flexbox flex-align-center" v-if="item1.goods_info">
            <nuxt-link
              class="img overflow-hidden border"
              :to="item1.goods_info.type !== 3 ? localePath(`/product/${item1.goods_info.code}`) : $route.fullPath"
            >
              <img
                loading="lazy"
                class="size-full object-cover"
                :src="$globalFn.imgPrefixUrl(item1.goods_info.image, 'goods_thumb_1_1')"
                alt="Product thumbnail"
                title="Order product preview"
              />
            </nuxt-link>
            <div class="text flex-1">
              <div class="name two-line">
                {{ item1.goods_info.goods_name }}
              </div>
              <div class="desc noe-line" v-if="item1.goods_info.sku && item1.goods_info.sku.length">
                {{ item1.goods_info.sku[0].title }}
              </div>
            </div>
          </div>
          <div class="right flexbox flex-align-center">
            <div class="right-col-no" @click="orderNoInfo(item1)">
              {{ item1.order_no }}
            </div>
            <div class="right-col price">
              <div>{{ item1.currency_symbol }}{{ (item1.goods_info && item1.goods_info.sku && item1.goods_info.sku.price_text) || 0 }}</div>
              <div class="price-num">x{{ item1.total_num }}</div>
            </div>
            <div class="right-col status">
              <span :class="[item1.order_status == 4 ? 'success' : '']">{{ item1.order_status_text }}</span>
            </div>
            <div class="right-col handle">
              <div class="flexbox flex-tb flex-center">
                <el-button class="handle-btn again-btn" v-if="item1.order_status == 4" type="text" @click="againBuy(item1)">{{
                  $t('formBtn.buyAgain')
                }}</el-button>
                <el-button class="handle-btn card-btn" type="text" v-if="item1.type == 1 && item1.order_status == 4" @click="goCardpwd">{{
                  $t('formBtn.retrievecCard')
                }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单状态:0=等待付款,1=等待发货,2=处理中,3=发货中,4=已完成,5=已退款,6=取消订单 -->
    <div class="mobile-list">
      <div class="item" v-for="item in orderList" :key="item.id">
        <div class="top flexbox flex-align-center flex-justify-between">
          <div class="left">
            <div class="date !flex">{{ item.create_time_text }}</div>
            <NuxtLink class="no flex gap-1 items-center" :to="goOrderPay(item)">
              <span>
                {{ $t('formItem.payNo') }}
              </span>
              <span> : </span>
              <span>
                {{ item.order_no }}
              </span>
            </NuxtLink>
          </div>
          <div class="rigth !flex !items-center">
            <span :class="['price', item.order_status == 6 ? 'overtime' : '']">{{ item.currency_symbol }}{{ item.payable_price_text }}</span>
            <NuxtLink :to="goOrderPay(item)">
              <el-button v-if="item.order_status == 0" class="theme-btn">
                {{ $t('formBtn.continuePayment') }}
              </el-button>
            </NuxtLink>
            <el-button class="default-btn" v-if="item.order_status == 6" @click="deleteOrder(item)">{{ $t('formBtn.delete') }}</el-button>
          </div>
        </div>
        <div class="goods">
          <div class="goods-item" v-for="item1 in item.order_goods" :key="item1.order_no" @click="goDetail(item1)">
            <div class="goods-base flexbox flex-align-center flex-justify-between" v-if="item1.goods_info">
              <div class="left flexbox flex-align-center">
                <img
                  loading="lazy"
                  class="img flex-none"
                  :src="$globalFn.imgPrefixUrl(item1.goods_info.image)"
                  alt="Product image"
                  title="Product details"
                />
                <div class="info">
                  <div class="name two-line">
                    {{ item1.goods_info.goods_name }}
                  </div>
                  <div class="desc one-line" v-if="item1.goods_info.sku && item1.goods_info.sku.length">
                    {{ item1.goods_info.sku[0].title }}
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="money money-red">{{ item1.currency_symbol }}{{ item1.unit_price || 0 }}</div>
                <div class="num">x{{ item1.total_num }}</div>
              </div>
            </div>
            <div class="goods-row flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('userInfo.orderStatus') }}</span>
              <div class="status">
                <span :class="[item1.order_status == 4 ? 'success' : '']">{{ item1.order_status_text }}</span>
              </div>
            </div>
            <div class="goods-row goods-row-no flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('userInfo.orderNo') }}</span>
              <div class="text" @click="orderNoInfo(item1)">
                <span class="order-no">{{ item1.order_no }}</span>
              </div>
            </div>
            <div class="goods-handle flexbox flex-align-center flex-justify-end">
              <el-button class="theme-plain-btn" type="text" v-if="item1.type == 1 && item1.order_status == 4" @click="goCardpwd">{{
                $t('formBtn.retrievecCard')
              }}</el-button>
              <el-button class="default-btn" v-if="item1.order_status == 4" type="text" @click="againBuy(item1)">{{
                $t('formBtn.buyAgain')
              }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  export default {
    data() {
      return {
        input: '', // 搜索输入框的值
        orderTabId: '', // 订单状态标签id
        orderList: [], // 订单列表数据
        loading: false, // 加载状态
        noMore: false,
        page: 1,
        limit: 10
      }
    },
    computed: {},
    created() {
      this.getOrderList()
    },
    methods: {
      loadMoreData() {
        if (!this.loading && !this.noMore) {
          this.page++
          this.getOrderList()
        }
      },
      searchClear() {
        this.input = ''
      },
      goDetail(item) {
        this.$router.push({
          path: this.localePath(`/product/${item.goods_info.code}`)
        })
      },
      async getOrderList() {
        this.loading = false
        try {
          const res = await this.$axios.get(`/api/order/index`, {
            params: {
              page: this.page,
              order_status: this.orderTabId,
              keywords: this.input,
              limit: this.limit
            }
          })
          // 如果是第一页，直接替换数据
          if (this.page === 1) {
            this.orderList = res || []
          } else {
            // 否则追加数据
            this.orderList = [...this.orderList, ...(res || [])]
          }
          // 判断是否还有更多数据
          this.noMore = res.length === 0 || res.length < this.limit
        } catch (err) {
          console.error('获取评价列表失败:', err)
          this.orderList = []
          this.noMore = true
        } finally {
          this.loading = false
        }
        // try {
        //   this.loading = true;
        //   // 构建请求参数
        //   const params = {
        //     order_status: this.orderTabId,
        //     keywords: this.input,
        //   };
        //   // 发起请求获取订单列表
        //   const res = await this.$axios.get("/api/order/index", {
        //     params,
        //   });
        //   this.orderList = res;
        // } catch (err) {
        //   // 请求失败时清空列表
        //   this.orderList = [];
        //   console.error("获取订单列表失败:", err);
        // } finally {
        //   // 无论成功失败都关闭loading
        //   this.loading = false;
        // }
      },
      submitSearch(value) {
        this.input = value
        this.getOrderList()
      },
      orderTabChange(type) {
        // if (type == 9) return;
        this.orderTabId = type
        this.page = 1
        this.orderList = []
        this.getOrderList()
      },
      deleteOrder: throttle(
        function (item) {
          this.page = 1
          this.loading = false
          this.$axios.post('/api/order/delete', { id: item.order_id }).then(res => {
            // ;
            // this.$message.success(res.msg);
            this.getOrderList()
          })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      orderNoInfo(item) {
        this.$router.push({
          path: this.localePath('/order/detail'),
          query: {
            no: item.order_no
          }
        })
      },
      goCardpwd() {
        this.$router.push({
          path: this.localePath('/user/cardpwd'),
          query: {
            type: 3
          }
        })
      },
      againBuy(item) {
        if (item.type == 1) {
          this.$router.push({
            path: this.localePath(`/cards/${item.goods_info.code}`)
          })
        } else if (item.type == 2) {
          this.$reouter.push({
            path: this.localePath(`/game-recharge/${item.goods_info.code}`)
          })
        } else if (item.type == 3) {
          this.$router.replace({
            path: this.localePath('/mobileRecharge'),
            query: {}
          })
        }
        return
        if (!item.sku_id) return
        let obj = { id: item.sku_id, num: item.total_num || 1, info: {} }
        if (item.goods_info.ext && item.goods_info.ext.length) {
          item.goods_info.ext.map(item1 => {
            if (item1.field && item1.value) {
              obj.info[item1.field] = item1.value
            }
          })
        }
        this.$axios.post('/api/order/create', { goods: [obj] }).then(res => {
          this.$router.push({
            path: this.localePath('/order/pay'),
            query: {
              no: res.order_no
            }
          })
        })
      },
      goOrderPay(item) {
        // this.$router.push({
        //   path: this.localePath("/order/pay"),
        //   query: {
        //     no: item.order_no,
        //   },
        // });
        let p = this.localePath('/order/pay?no=' + item.order_no)
        return p
      }
    }
  }
</script>
<style lang="less" scoped>
  .title {
    box-sizing: border-box;
    padding: 20px 24px 12px 24px;
    .search-comp {
      display: none;
    }
    .row {
      padding-bottom: 8px;
      border-bottom: @border-1-fo;
    }
    .name {
      font-weight: 500;
      font-size: 22px;
      color: @font-color-14;
    }
  }
  .tab-cont {
    width: 100%;
    .filter {
      box-sizing: border-box;
      padding: 0 24px;
      height: 60px;
      border-bottom: @border-1-fo;
      .tabs {
        .tab {
          padding: 0 16px;
          font-size: 16px;
          color: @font-color-99;
          cursor: pointer;
        }
        .tab.active {
          position: relative;
          color: @theme-color;
          font-weight: bold;
        }
        .tab.active::before {
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          bottom: -18px;
          width: 64px;
          height: 2px;
          background: @theme-color;
          transform: translateX(-50%);
        }
      }
    }
  }
  .tab-cont-order {
    .mobile-list {
      display: none;
    }
    .list {
      padding-top: 20px;
      padding-bottom: 12px;
      .item {
        margin-bottom: 20px;
        background: @color-ff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
        border-radius: 8px;
        .info {
          padding: 0 16px;
          height: 54px;
          border-radius: 8px 8px 0px 0px;
          background: @color-f7;
          .no {
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
            cursor: pointer;
            font-weight: bold;
          }
          .date {
            margin-right: 16px;
            font-weight: 500;
            font-size: 14px;
            color: @font-color-26;
            cursor: pointer;
          }
          .price {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 14px;
            color: @theme-color;
          }
          .price.overtime {
            color: @font-color-99;
          }
          .btn {
            box-sizing: border-box;
            margin-left: 16px;
            width: auto;
            padding: 0 12px;
            text-align: center;
            height: 32px;
            line-height: 32px;
            background: @color-ff;
            font-weight: 500;
            border-radius: 16px;
            font-size: 14px;
            color: @font-color-66;
            border: @border-1-e5;
          }
          .pay-btn {
            color: @color-ff;
            background: @theme-color;
            border: 1px solid @theme-color;
          }
        }
        .base {
          height: 96px;
          .goods {
            box-sizing: border-box;
            padding: 0 16px;
            width: 274px;
            height: 80px;
            .img {
              width: 56px;
              height: 56px;
              border-radius: 7px;
              cursor: pointer;
            }
            .text {
              margin-left: 12px;
              .name {
                width: 170px;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-26;
              }
              .desc {
                width: 170px;
                margin-top: 4px;
                font-size: 12px;
                color: @font-color-66;
              }
            }
          }
          .right {
            flex: 1;
            margin-left: 32px;
            .right-col {
              flex: 1;
              text-align: center;
            }
            .right-col-no {
              width: 180px;
              text-align: center;
              cursor: pointer;
              font-weight: bold;
              color: @theme-color;
            }
            .price {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
              .price-num {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
            }
            .status {
              font-size: 14px;
              color: @font-color-99;
              .success {
                color: #52c41a;
              }
              .error {
                color: #ff4d4f;
              }
            }
            .handle {
              .handle-btn {
                padding: 0;
                line-height: 20px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
              }
              .again-btn {
                color: @font-color-99;
              }
              .card-btn {
                color: @theme-color;
              }
            }
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
    }
    .tab-cont {
      width: 100%;
      margin-top: 8px;
      .filter {
        box-sizing: border-box;
        padding: 0 16px;
        height: 36px;
        border-bottom: none;
        .tabs {
          .tab {
            padding: 0;
            margin-right: 24px;
            font-size: 14px;
          }
          .tab.active {
            font-weight: 500;
            color: @theme-color;
          }
          .tab.active::before {
            display: none;
            height: 0px;
          }
        }
        .search-comp {
          display: none;
        }
      }
    }
    .list {
      display: none;
    }
    .mobile-list {
      padding: 0 16px;
      padding-top: 16px;
      display: block !important;
      .item {
        margin-bottom: 16px;
        .top {
          padding: 0 12px;
          height: 60px;
          background: @color-f7;
          border-radius: 12px 12px 0px 0px;
          .date {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-14;
          }
          .no {
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }
          .price {
            font-weight: 500;
            font-size: 14px;
            color: @theme-color;
          }
          .overtime {
            color: @font-color-99;
          }
          .theme-btn {
            margin-left: 8px;
            width: auto;
            padding: 0 12px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
          }
          .default-btn {
            margin-left: 8px;
            width: auto;
            padding: 0 16px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            color: #383838;
          }
        }
        .goods {
          padding: 0 12px;
          background: @color-ff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
          border-radius: 0px 0px 12px 12px;
          .goods-item {
            padding-top: 8px;
            padding-bottom: 12px;
            .goods-base {
              margin-bottom: 8px;
              .img {
                width: 44px;
                height: 44px;
                border-radius: 8px;
              }
              .info {
                margin-left: 10px;
                .name {
                  width: 200px;
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
                .desc {
                  width: 200px;
                  font-size: 10px;
                  color: @font-color-99;
                }
              }
              .num {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .money {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-26;
              }
              .right {
                text-align: right;
              }
            }
            .goods-row {
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
              .succes {
                color: #52c41a;
              }
              .order-no {
                font-weight: 500;
                font-size: 12px;
                color: @theme-color;
              }
            }
            .goods-row-no {
              margin-top: 16px;
            }
            .goods-handle {
              margin-top: 16px;
              .theme-plain-btn {
                margin-left: 8px;
                width: auto;
                padding: 0 24px;
                height: 32px;
                line-height: 32px;
                font-size: 12px;
              }
              .default-btn {
                margin-left: 8px;
                width: auto;
                padding: 0 16px;
                height: 32px;
                line-height: 32px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .title {
      padding: 8px 16px;
      .search-comp {
        display: block;
      }
      .row {
        align-items: flex-end;
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-size: 20px;
      }
    }
    .tab-cont {
      width: 100%;
      margin-top: 8px;
      .filter {
        box-sizing: border-box;
        padding: 0 16px;
        height: 36px;
        border-bottom: none;
        .tabs {
          .tab {
            padding: 0;
            margin-right: 24px;
            font-size: 14px;
          }
          .tab.active {
            font-weight: 500;
            color: @theme-color;
          }
          .tab.active::before {
            display: none;
            height: 0px;
          }
        }
        .search-comp {
          display: none;
        }
      }
    }
    .list {
      display: none;
    }
    .mobile-list {
      padding: 0 16px;
      padding-top: 16px;
      display: block !important;
      .item {
        margin-bottom: 16px;
        .top {
          padding: 0 12px;
          height: 60px;
          background: @color-f7;
          border-radius: 12px 12px 0px 0px;
          .date {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-14;
          }
          .no {
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }
          .price {
            font-weight: 500;
            font-size: 14px;
            color: @theme-color;
          }
          .overtime {
            color: @font-color-99;
          }
          .theme-btn {
            margin-left: 8px;
            width: auto;
            padding: 0 12px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
          }
          .default-btn {
            margin-left: 8px;
            width: auto;
            padding: 0 16px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            color: #383838;
          }
        }
        .goods {
          padding: 0 12px;
          background: @color-ff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
          border-radius: 0px 0px 12px 12px;
          .goods-item {
            padding-top: 8px;
            padding-bottom: 12px;
            .goods-base {
              margin-bottom: 8px;
              .img {
                width: 44px;
                height: 44px;
                border-radius: 8px;
              }
              .info {
                margin-left: 10px;
                .name {
                  width: 200px;
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
                .desc {
                  width: 200px;
                  font-size: 10px;
                  color: @font-color-99;
                }
              }
              .num {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .money {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-26;
              }
              .right {
                text-align: right;
              }
            }
            .goods-row {
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
              .succes {
                color: #52c41a;
              }
              .order-no {
                font-weight: 500;
                font-size: 12px;
                color: @theme-color;
              }
            }
            .goods-row-no {
              margin-top: 16px;
            }
            .goods-handle {
              margin-top: 16px;
              .theme-plain-btn {
                margin-left: 8px;
                width: auto;
                padding: 0 24px;
                height: 32px;
                line-height: 32px;
                font-size: 12px;
              }
              .default-btn {
                margin-left: 8px;
                width: auto;
                padding: 0 16px;
                height: 32px;
                line-height: 32px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
</style>
